<template>
	<view class="weather-wrapper">
		<view class="weather-content">
			<view class="title-wrapper">
				<view class="title-left">
					<view class="name">欢迎来到九华山</view>
					<view class="date">{{ curDate }}</view>
					<view class="time">{{ currentTime }}</view>
				</view>
				<view class="title-right">
					<!-- <image class="weather-logo" src="/assets/images/home/weather-logo.png" mode=""></image> -->
					<view class="weather-box">
						<text class="weather">{{ currentWeather.weather }}</text>
						<text class="temp">{{ currentWeather.temperature }}°C</text>
					</view>
				</view>
			</view>
			<!-- 未来几天 -->
			<view class="feture-list">
				<view class="feture-item" v-for="(item, index) of weatherConfig" :key="index">
					<view class="date">{{ item.name }} {{ item.date }} {{ item.weather }}</view>
					<view class="desc"> {{ item.temp }} {{ item.wind }} {{ item.power }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';

// web服务api key
const WEB_API_KEY = '25975ddbb2532f329a6b6528a35c98bb';
// 青阳县adCode
const qyAdCode = '341723';
const casts = ref([]);
const curDate = ref('');

// 当前日期
const currentTime = ref('');
const setCurrentDate = () => {
	const date = new Date();
	const hour = date.getHours();
	const min = date.getMinutes();
	const second = date.getSeconds();
	currentTime.value = `${String(hour).padStart(2, '0')}:${String(min).padStart(2, '0')}:${String(
		second
	).padStart(2, '0')}`;
};

// 当前天气数据
const currentWeather = reactive({
	temperature: '0',
	weather: '大雨',
	winddirection: '西北'
});
const getCurrentWeather = () => {
	uni.request({
		url: `https://restapi.amap.com/v3/weather/weatherInfo?city=${qyAdCode}&key=${WEB_API_KEY}&extensions=base`,
		success(res) {
			const resData = res.data;
			if (resData.status !== '1') {
				return uni.showToast({
					title: '获取天气失败',
					icon: 'none'
				});
			}
			const weather = resData.lives[0];
			currentWeather.temperature = weather.temperature;
			currentWeather.weather = weather.weather;
			currentWeather.winddirection = weather.winddirection;
		}
	});
};

const weatherConfig = ref([
	{ name: '今天', weather: '', date: '', temp: '', power: '', wind: '' },
	{ name: '明天', weather: '', date: '', temp: '', power: '', wind: '' },
	{ name: '后天', weather: '', date: '', temp: '', power: '', wind: '' }
]);
const getFeatureWeather = () => {
	uni.request({
		url: `https://restapi.amap.com/v3/weather/weatherInfo?city=${qyAdCode}&key=${WEB_API_KEY}&extensions=all`,
		success(res) {
			const resData = res.data;
			console.log('获取的天气数据', res);
			if (resData.status !== '1')
				return uni.showToast({
					title: '获取天气失败',
					icon: 'none'
				});
			casts.value = resData.forecasts[0].casts;
			const weekToText = {
				1: '星期一',
				2: '星期二',
				3: '星期三',
				4: '星期四',
				5: '星期五',
				6: '星期六',
				7: '星期日'
			};
			curDate.value = `${casts.value[0].date} ${weekToText[casts.value[0].week]}`;

			weatherConfig.value = weatherConfig.value.map((item, index) =>
				Object.assign({}, item, {
					date: casts.value[index]['date'].split('-').slice(1).join('/'),
					weather: `${casts.value[index]['dayweather']}~${casts.value[index]['nightweather']}`,
					temp: `${casts.value[index]['nighttemp']}°C~${casts.value[index]['daytemp']}°C`,
					wind: `${casts.value[index]['daywind']}风`,
					power: `${casts.value[index]['daypower']}级`
				})
			);
		}
	});
};

onMounted(() => {
	getFeatureWeather();
	getCurrentWeather()
	setCurrentDate();
	setInterval(() => setCurrentDate(), 1000);
});
</script>

<style lang="scss" scoped>
.weather-wrapper {
	margin-top: 20rpx;
	width: 100%;
	height: 408rpx;
	padding: 0 30rpx;
	.weather-content {
		padding: 44rpx 40rpx 0 46rpx;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		background: url('/assets/images/home/weather-bg.png') center center no-repeat;
		background-size: 100% 100%;

		.title-wrapper {
			justify-content: space-between;
			align-items: center;
			display: flex;
			.title-left {
				.name {
					font-size: 44rpx;
					color: #ffffff;
					font-family: MF LangSong (Noncommercial), MF LangSong (Noncommercial);
				}
				.date {
					margin-top: 20rpx;
					font-size: 20rpx;
					color: #cbcbcb;
				}
				.time {
					margin-top: 10rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #ffffff;
				}
			}
			.title-right {
				display: flex;
				.weather-logo {
					width: 64rpx;
					height: 68rpx;
				}
				.title-weather {
					font-size: 32rpx;
					color: #fff;
				}
				.weather-box {
					margin-left: 20rpx;
					.weather {
						color: #ffffff;
						font-size: 38rpx;
					}
					
					.temp {
						margin-left: 10rpx;
						color: #fff;
						font-size: 32rpx;
					}
				}
			}
		}

		.feture-list {
			.feture-item {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
				.date {
					font-size: 20rpx;
					color: #ffffff;
				}
				.desc {
					font-size: 20rpx;
					color: #ffffff;
				}
			}
		}
	}
}
</style>
